<script setup lang="ts">
import { NCard, NSpace, NGradientText, NButton } from 'naive-ui'
import { useRouter } from 'vue-router'

const router = useRouter()

const goToPractice = () => {
  router.push('/practice')
}
</script>

<template>
  <div class="container mx-auto px-4 py-12">
    <NSpace vertical size="large">
      <!-- 欢迎区域 -->
      <NCard>
        <div class="text-center">
          <NGradientText
            gradient="linear-gradient(90deg, #2080f0 0%, #18a058 100%)"
            size="48"
            class="animate-fade-in"
          >
            Vue3 组件练习
          </NGradientText>
          <div class="mt-4 text-gray-500 text-lg animate-slide-in-bottom">
            使用 Vue3 + TypeScript + Naive UI + UnoCSS 构建的现代化组件练习项目
          </div>
        </div>
      </NCard>

      <!-- 功能介绍 -->
      <div class="grid md:grid-cols-2 gap-6">
        <NCard class="transform hover:scale-105 transition-transform duration-300">
          <div class="flex items-start gap-4">
            <div class="text-green-500 text-xl">✓</div>
            <div>
              <div class="text-lg font-medium mb-2">Vue3 组合式 API</div>
              <div class="text-gray-500">
                使用最新的 Vue3 组合式 API 开发，代码更简洁、逻辑更清晰
              </div>
            </div>
          </div>
        </NCard>

        <NCard class="transform hover:scale-105 transition-transform duration-300">
          <div class="flex items-start gap-4">
            <div class="text-green-500 text-xl">✓</div>
            <div>
              <div class="text-lg font-medium mb-2">TypeScript 支持</div>
              <div class="text-gray-500">全面的 TypeScript 支持，提供更好的类型提示和代码提示</div>
            </div>
          </div>
        </NCard>

        <NCard class="transform hover:scale-105 transition-transform duration-300">
          <div class="flex items-start gap-4">
            <div class="text-green-500 text-xl">✓</div>
            <div>
              <div class="text-lg font-medium mb-2">Naive UI 组件库</div>
              <div class="text-gray-500">
                使用功能丰富的 Naive UI 组件库，提供美观的界面和丰富的交互
              </div>
            </div>
          </div>
        </NCard>

        <NCard class="transform hover:scale-105 transition-transform duration-300">
          <div class="flex items-start gap-4">
            <div class="text-green-500 text-xl">✓</div>
            <div>
              <div class="text-lg font-medium mb-2">UnoCSS 原子化 CSS</div>
              <div class="text-gray-500">使用 UnoCSS 进行样式开发，提供灵活的样式定制能力</div>
            </div>
          </div>
        </NCard>
      </div>

      <!-- 开始使用 -->
      <NCard>
        <div class="text-center">
          <NButton
            type="primary"
            size="large"
            @click="goToPractice"
            class="px-8 text-lg h-12 transform hover:scale-105 transition-all duration-300"
          >
            开始体验
          </NButton>
        </div>
      </NCard>
    </NSpace>
  </div>
</template>

<style scoped>
.animate-fade-in {
  animation: fadeIn 1s ease-out;
}

.animate-slide-in-bottom {
  animation: slideInBottom 1s ease-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes slideInBottom {
  from {
    transform: translateY(20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
</style>
